<template>
  <el-dialog v-model="dialogVisible" width="900" :before-close="handleClose">
    <template #header="{}">
      <div class="my-header">
        <span class="titleClass">附件预览</span>
      </div>
    </template>
    <div class="attachments">
        <el-carousel height="600px" :autoplay="false">
            <el-carousel-item v-for="file in files" :key="file.id">
                <!-- <iframe :src="file.url" width="100%" height="100%"></iframe> -->
                <div style="height: 100%; overflow: auto;">
                    <component :is="getPreviewComponent(file)" :src="file.url" style="height:100%"></component>
                    <!-- <docx-viewer :src="file.url" style="height: 100%;"></docx-viewer> -->
                </div>

            </el-carousel-item>
        </el-carousel>
      <!-- <div v-for="file in files" :key="file.id" class="attachment-item" > -->


        <!-- <a :href="file.url" :download="file.title">

          <span>{{ file.title }} ({{ getFileType(file.title) }})</span> -->
        <!-- </a>  -->
         <!-- <iframe :src="file.url"></iframe> -->
      <!-- </div> -->
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { fetchAttachments } from '@/api/announcement'; // 假设你有一个 API 文件来处理数据请求
import pdfViewer from '@vue-office/pdf'
import docxViewer from '@vue-office/docx'
import excelViewer from '@vue-office/excel'

const dialogVisible = ref(false);
const files = ref([]);

const showAttachments = async (id, title) => {
  try {
    const fetchedFiles = await fetchAttachments(id);
    console.log('Fetched Files:', fetchedFiles); // 调试输出
    files.value = fetchedFiles.data;
    dialogVisible.value = true;
  } catch (error) {
    ElMessage.error('获取附件失败');
  }
};

const handleClose = () => {
  dialogVisible.value = false;
};

// 动态选择预览组件
const getPreviewComponent = (file) => {
  const fileType = getFileType(file.title);
  switch (fileType) {
    case 'excel':
      return excelViewer;
    case 'pdf':
      return pdfViewer;
    case 'docx':
      return docxViewer;
    default:
      return iframe; // 默认返回图片查看组件
  }
};

// 获取文件类型
const getFileType = (filename) => {
  const extension = filename.split('.').pop().toLowerCase();
  if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) return 'image';
  if (extension === 'pdf') return 'pdf';
  if (['docx', 'doc'].includes(extension)) return 'docx';
  if (extension === 'xlsx')return 'excel'
  // 可以继续添加其他文件类型的判断
  return 'unknown';
};


// 导出 showAttachments 方法
defineExpose({ showAttachments });
</script>

<style scoped>
.attachments {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 70%;
}
.attachment-item {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 4px;
  font-size: 16px;
  text-align: left; /* 左对齐文本 */
}
.attachment-item a {
  color: #1890ff; /* 链接颜色 */
  text-decoration: none; /* 移除下划线 */
}
.attachment-item a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
</style>